<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    </style>
</head>

<body>

    <div id="box">


    </div>


    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">

        // 定义一个类组件
        class Book extends React.Component {

            constructor(){
                super();
                this.state = {
                    id:"",
                    name:"",
                    price:0,
                    isSale:"1",
                    tags:["自营"]
                }
            }

            changeValue=(ev)=>{
                console.log("ev.target.value",ev.target.value);                
                this.setState({
                    [ev.target.name]:ev.target.value
                })
            }

            changeTags=(ev)=>{
                let arr = [...this.state.tags];
                let index = arr.indexOf(ev.target.value);
                if(index>-1){
                    arr.splice(index,1);
                }else{
                    arr.push(ev.target.value);
                }
                this.setState({
                    tags:arr
                })
            }

            render() {
                return (
                    <div>
                        <h1>书籍组件</h1>
                        <p>
                            测试（表单元素的默认值）：<input type="text" defaultValue="ddd" />
                        </p>
                        <p>
                            编号：<input type="text" name="id" value={this.state.id} onChange={this.changeValue} />
                        </p>
                        <p>
                            书名：<input type="text" name="name" value={this.state.name} onChange={this.changeValue} />
                        </p>
                        <p>
                            价格：<input type="text"  />
                        </p>
                        <p>
                            是否上架：
                            <input type="radio" name="isSale" checked={this.state.isSale=="1"} value="1" onChange={this.changeValue} />是
                            <input type="radio" name="isSale" checked={this.state.isSale=="0"} value="0" onChange={this.changeValue} />否
                        </p>
                        <p>
                            标签：
                            <input type="checkbox" checked={this.state.tags.includes("自营")} value="自营" onChange={this.changeTags} />自营
                            <input type="checkbox" checked={this.state.tags.includes("京东物流")} value="京东物流" onChange={this.changeTags}  />京东物流
                            <input type="checkbox" checked={this.state.tags.includes("plus会员专享")} value="plus会员专享" onChange={this.changeTags}  />plus会员专享
                        </p>
                        <p>
                            <input type="button" value="添加" />
                        </p>                     
                    </div>
                )
            }

        }



        const root = (<div>
            <h1>组件：</h1>
            <Book>
                <p>我是书中的p</p>
            </Book>
        </div>
        );

        ReactDOM.render(root, document.getElementById("box"));


    </script>
</body>

</html>